<template>
    <div class="common-layout">
        <el-container>

            <el-header style="background-color: hotpink;">


                <span>
                    <h1 style="margin-top: 0px; float:left;">RBAC管理系统</h1>
                </span>


                <el-button style="float: right; margin-top: 20px;" type="danger" @click="logout">退出登录</el-button>
                <div style="background-color: blue;">
                    <span style="float: right; margin-top: 20px;">
                        <el-icon>
                            <Avatar />
                        </el-icon>
                        <el-tag style="margin-left: 15px;">用户名：{{ store.current.userName
                        }}</el-tag>
                        <el-tag style="margin-left: 15px;" type="success">昵称：
                            {{
                                store.current.userNickname
                            }}</el-tag> <el-tag style="margin-left: 15px;" type="warning">角色名：{{
                                store.current.roleName
                            }}</el-tag>
                    </span>

                </div>
            </el-header>
            <el-menu active-text-color="#ffd04b" background-color="dodgerblue" class="el-menu-vertical-demo"
                default-active="1" text-color="#fff" router style="width: 200px;height: 60px;">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>RBAC</span>
                    </template>
                    <el-menu-item index="/PermissionShow">权限页面</el-menu-item>
                    <el-menu-item index="/UserShow">用户管理</el-menu-item>
                    <el-menu-item index="/RoleShow">角色管理</el-menu-item>

                </el-sub-menu>

            </el-menu>

            <el-container>



                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/stores/counter';
import router from '@/router'
const store = useCounterStore();
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { stringifyQuery } from 'vue-router';
import { storeToRefs } from 'pinia';

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}


const logout = () => {
    store.current.roleId = 0,
        store.current.roleName = "",
        store.current.token = "",
        store.current.userId = 0,
        store.current.userName = "",
        store.current.userNickname = ""
    // localStorage.removeItem("userName")
    // localStorage.removeItem("userPass")

    router.push('/')
}

</script>
<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #88a5d7;
    font-size: 32px;
    font-weight: 600;
}
</style>
